<template>

        <div :class="asideClass" >
            <div class="blurBox"></div>
            <div class="userInfo">
                <img src="http://shilezhi.club:8082/Api/img/getImg/blog_1_time_1632542403309" alt="">

                <div class="Info" @click="openShittyWord">
                    <div class="UserName">石乐志</div>
                    <div class="content">石乐志WDNMD</div>
                    <transition name="shittyWord">
                        <div class="shittyWord" v-show="isShow">
                            <span>{{shittyWord}}</span>
                        </div>
                    </transition>

                </div>


            </div>
            <ul class="navBar">
                <div class="navBarTitle">导航</div>
                <li><a @click="()=>{
                  this.count = !this.count
                    this.$router.push({path:'/#'+this.count+'#/',query:{blogTag:'all'}})
                }"><span class="fa fa-home"></span> 首页</a></li>
                <li><a @click="()=>{
                    this.$router.push({name:'About'})
                }"><span class="fa fa-user-o"></span>关于</a></li>
                <li><a href=""><span class="fa fa-link"></span>友人账目</a></li>

            </ul>

            <div   class="constitute">
                <div  class="navBarTitle">组成</div>
                <dl style="overflow: hidden;" >
                    <dt  @click="constituteIsShow = !constituteIsShow"> <span class="fa fa-plus-square-o"></span>分类 <span style="float: right " :class="constituteIsShow? 'fa fa-angle-down':'fa fa-angle-right' "></span></dt>

                    <div style="overflow: hidden;">
                        <transition name="constituteTrans">
                            <div v-show="constituteIsShow">
                                <dd  @click="()=>{this.$router.push({path:'/',query:{blogTag:'serious'}})}">
                                  <a >正紧博客</a>
                                  </dd>
                                <dd>
                                    <a @click="()=>{this.$router.push({path:'/',query:{blogTag:'easygoing'}})}">不正紧博客</a>
                                </dd>
                            </div>
                        </transition>
                    </div>
                    <!--                                    <transition name="constituteTrans">-->
                    <!--                                        <div style="position: relative;z-index: 0"  v-show="constituteIsShow">-->
                    <!--                                            <dd><a href="">1</a></dd>-->
                    <!--                                            <dd><a href="">2</a></dd>-->
                    <!--                                        </div>-->
                    <!--                                    </transition>-->



                    <dt @click="constituteIsShow1 = !constituteIsShow1"><span class="fa fa-html5"></span>页面<span style="float: right" :class="constituteIsShow1? 'fa fa-angle-down':'fa fa-angle-right' "></span></dt>
                    <div style="overflow: hidden;">
                        <transition name="constituteTrans">
                            <div v-show="constituteIsShow1">
                                <dd><a @click="()=>{ this.$router.push({path:'/'}) }">主页</a></dd>
                                <dd><a @click="()=>{this.$router.push({path:'/about'})}">关于</a></dd>
                                <dd><a @click="()=>{this.$router.push({path:'/archived'})}">归档</a></dd>
                            </div>
                        </transition>
                    </div>
                    <dt @click="constituteIsShow2 = !constituteIsShow2"> <span class="fa fa-external-link-square"></span>友情链接<span style="float: right" :class="constituteIsShow2? 'fa fa-angle-down':'fa fa-angle-right' "></span></dt>
                    <div style="overflow: hidden;">

                        <transition name="constituteTrans">
                            <div  v-show="constituteIsShow2">
                                <dd><a href="">1</a></dd>
                                <dd><a href="">2</a></dd>
                                <dd><a href="">3</a></dd>
                                <dd><a href="">4</a></dd>
                            </div>
                        </transition>
                    </div>
                </dl>

            </div>

            <div class="leftFooter">
                <a href="">
                    <span class="fa fa-cogs"></span>
                    <span class="leftFooterAdmin">管理</span>
                </a>
                <a href="">
                    <span class="fa fa-book"></span>
                    <span class="leftFooterBooks">文章</span>
                </a>
                <a >
                    <span class="fa fa-envelope-open-o"></span>
                    <span class="leftFooterCommont">评论</span>
                </a>
            </div>
            <MyFooter/>

        </div>


</template>

<script>
    import "element-ui/lib/theme-chalk/display.css";
    import MyFooter from "./MyFooter";
    import { Message } from 'element-ui';
    export default {
        name: "MyAside",
        components: {
            MyFooter
        },
        data() {
            return {
                isOpen: false,
                asideClass: 'myAside myAside_hide',
                isShow: false,
                shittyWord: '',
                constituteIsShow: false,
                constituteIsShow1: false,
                constituteIsShow2: false,
                count:true
            }
        },
        methods: {

            openShittyWord() {
                if (!this.isShow) {
                  this.axios.defaults.withCredentials = true;
                  this.axios.defaults.headers.post["Content-Type"] =
                      "application/json;charset=utf-8";
                    this.axios.get(
                        'https://international.v1.hitokoto.cn/?max_length=15'
                    ).then(response => {
                            this.shittyWord = response.data.hitokoto
                        },
                        err => {
                            this.shittyWord = 'Network error.'
                          console.log(err)
                        }
                    )
                    this.isShow = !this.isShow
                    //打开

                } else {
                    //立即关闭

                    this.isShow = !this.isShow
                }
                //延迟关闭
                this.timer = setTimeout(() => {
                    this.isShow = false;

                }, 2000)
                clearTimeout(this.timer)
            }


        },

        mounted() {

            this.$EventBus.$on('AsideOpen',(data)=>{
                if (data === 'BtnClick'){
                    if (!this.isOpen)
                    {
                        this.asideClass = 'myAside asideOpen'
                        this.isOpen = true
                    }
                    else
                    {
                        this.asideClass = 'myAside myAside_hide'
                        this.isOpen = false
                    }
                }
                else {
                    this.asideClass = 'myAside myAside_hide'
                    this.isOpen = false
                }

            })
        }
        // watch:{
        //     '$EventBus'(){
        //         //监听 全局事件总线 接收AsideBar 的类名
        //         this.$EventBus.$on('openAsideBar',(data)=>{
        //             this.asideClass = data
        //             console.log('接收'+data)
        //         })
        //
        //
        //     }
        // }
    }
</script>

<style scoped>

    .asideOpen{
        /*display: block !important;*/
        position: fixed !important;
        left: 0 !important;
        bottom: 0 !important;
    }
    .myAside {
        background-color: #f9f9f9;
        align-items: stretch;
        width: 13.75rem;
        overflow: hidden;
        height: calc(100vh - 3.125rem);
        position: sticky;
        top: 3.125rem;
        left: 0;
        flex-shrink: 0;
        transition: 0.5s;
        z-index: 10;

    }


    @media only screen and (max-width: 767px){
        .myAside_hide{
            position: fixed !important;
            left: -13.75rem !important;
            /*display: none !important;*/
            transition: 0.5s;
        }
    }


    .shittyWord-enter-active{
        animation: flatGo 0.5s ;
    }


    .shittyWord-leave-active {
        animation: flatGo 0.5s reverse ;
    }

    @keyframes flatGo {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0px);
        }

    }




    .constituteTrans-enter-active{
        animation: YToGo 0.5s ;
    }
    .constituteTrans-leave-active{
        animation: YToGo 0.5s reverse ;
    }
    @keyframes YToGo {
        from {
            transform: translateY(-100%);
        }
        to {
            transform: translateY(0px);
        }

    }





    .shittyWord {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 12.5rem;
        height: 4.0625rem;
        top: 6.375rem;
        background-color: #1eb8e3;
        /*line-height: 4.0625rem;*/
        text-align: center;
        color: white;
        box-shadow: 2px 2px 3px #e1e1e1;
        font-weight: 300 !important;
        transition: 0.5s;
        left: 0.625rem;
    }


    .Info:hover {
        cursor: pointer;
    }




    .userInfo {
        box-sizing: border-box;
        height: 6.25rem;
        padding: 0.9375rem;
        display: flex;
        align-items: center;
        justify-content: center;


    }

    .userInfo img {
        width: 3.75rem;
        height: 3.75rem;
        border-radius: 50%;
        margin: 0.625rem;
        box-shadow: 2px 2px 3px #e1e1e1;
        position: relative;
    }

    .UserName {
        font-size: 0.875rem;
        text-align: center;
        font-weight: 700;
    }

    .content {
        font-size: 0.75rem;
        text-align: center;

    }
    .constitute a{
        display: block;
        width: 100%;
    }
    .constitute dd{
        background-color: #fff;
        height: 1.375rem;

    }
    .constitute dt{
        transition: 0.5s;
    }

    .navBar,.constitute{
        border-top: 0.0625rem solid white;
        border-bottom: 0.0625rem solid white;
        color: #98a1a5;
    }

    .navBarTitle{
        font-size: 0.75rem;
        display: block;
        box-sizing: border-box;
        margin-top: 0.9375rem;
        margin-bottom: 0.625rem;
        padding: 0 0.9375rem !important;
        color: #58666e;
    }

    .navBar li,.constitute dt {
        display: block;
        box-sizing: border-box;
        padding: 0 1.25rem;
        font-size: 0.875rem;
        transition: 0.5s;
        color: #58666e;
    }

    .navBar span,.constitute span {
        width: 2.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        font-size: 1rem;
    }

    .navBar a {
        display: block;
    }

    .navBar li:hover,.constitute dt:hover {
        background-color: #ececec;
        cursor: pointer;

    }
    .constitute dt{
        overflow: hidden;
    }
    .constitute dd{
        padding: 0.625rem 1.25rem 0.625rem 3.4375rem;
    }
    .constitute dd:hover{
        background-color: #f2f2f2;
        transition: 0.5s;
    }

    .navBar li:first-child:hover {
        background-color: transparent;
    }


    .leftFooter {
        display: flex;
        justify-content: space-around;

        width: 100%;
        height: 3.125rem;
        /* background-color: #1eb8e3; */
        position: absolute;
        bottom: 1.25rem;

    }
    .leftFooter a {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 3.125rem;
        height: 3.125rem;
    }
    .leftFooter a span{
        font-size: 0.875rem;
    }
    .leftFooterAdmin,.leftFooterBooks,.leftFooterCommont{
        font-size: 0.8125rem;
        margin-top:0.1875rem;
    }

</style>